<template>
  <div id="list">
    <van-tabs>
      <van-tab title="销量"> </van-tab>
      <van-tab title="新品"></van-tab>
      <van-tab title="价格"></van-tab>
    </van-tabs>
        
    <van-card v-for="item in list" :key="item.goods_id" currency="￥" card-font-size="font-size-sm" @click-thumb="toDetail(item.gc_id)">
      <template #title>
        <div class="title">
          {{ item.goods_name | parseName(18) }}
        </div>
        <br>
      </template>
      <template #desc>
        <div class="desc">
          {{ item.store_name }}
        </div>
        <br>
      </template>
      <template #price> ￥{{ item.goods_price }}</template>

      
      <template #thumb >
        <img :src="item.goods_image" class="tupian" />
        </template>

      <template #footer>
       <van-icon name="add-o" class="tianjia" @click="addToCart(item)" />
      </template>
    </van-card>
    <van-icon name="shopping-cart-o" class="cart" @click="toCart"/>
  </div>
</template>

<script>
  import axios from "axios";
  import Vue from "vue";
  import {
    Tab,
    Tabs
  } from "vant";
  import {
    Card,
    Tag,
    Button
  } from "vant";
  // import { Lazyload } from "vant";

  // Vue.use(Lazyload);

  // Vue.use(Lazyload, {
  //   loading: "https://scpic1.chinaz.net/Files/pic/pic9/202101/hpic3454_s.jpg",
  // });

  Vue.use(Card);
  Vue.use(Tab);
  Vue.use(Tabs);
  Vue.use(Tag);
  Vue.use(Button);

  export default {
    metaInfo: {
      meta: [{
        name: "referrer",
        content: "no-referrer"
      }],
    },
    data() {
      return {
        list: [],
      };
    },
    created(){
      this.$store.commit("global/setFooter",false)
    },
    mounted() {
      let url =
        "https://www.fastmock.site/mock/3d221d9964a08d39eea591645965f867/api/getList";
      axios.get(url).then((res) => {

        this.list = res.datas.list;
        this.list.map(item => {
          item.count = 1
        })
      });
    },
    beforeDestroy(){
      this.$store.commit("global/setFooter",true)
    },
    filters: {
      parseName: function (goods_name, len) { 
        if(goods_name.length <= len) return goods_name
        return goods_name.substr(0,len) + "..."
      }
    },
    methods:{
      toDetail(gc_id){
        this.$router.push("/list/" + gc_id)
      },
      toCart(){
        this.$router.push("/cart")
      },
      addToCart(item){
        // console.log(item)
        let goods = JSON.parse(localStorage.getItem('list')) || []
        if (!goods.length) {
          goods.push(item)
        } else {
            let arr = goods.filter(goods => {
              return goods.goods_id == item.goods_id
            })
            if (!arr.length) {
              goods.push(item)
            } else {
              arr[0].count++
            }
        }
        localStorage.setItem('list',JSON.stringify(goods))
      }
    }
  };
</script>

<style lang="scss" scoped>

  .tupian {
    width: 100px;
    height: 100px;
    margin:10px -10px;
  }

  .tianjia {
    transform: scale(2);
    color: green;
    position: relative;
    top: -15px;
  }

  .title {
    font-size: 16px;
  }
  .cart{
    position: fixed;
    right: 16px;
    bottom: 140px;
    transform: scale(2);
    color: green;
    z-index: 9;
    background: rgba(221, 216, 216, 0.8);
    border-radius: 5px;
  }
</style>